import { useState, useReducer, createContext } from 'react'
import { Routes, Route } from 'react-router-dom'
import About from "./components/About";
import About2 from "./components/About2";
import About3 from "./components/About3";
import About4 from './components/About4';
import About5 from './components/About5';
import About6 from './components/About6';
import About7 from './components/About7';
import About8 from './components/About8';

export const Context = createContext()

function reducer(state, { type }) {
  let NewState = JSON.parse(JSON.stringify(state))
  switch(type) {
    case "ADD":
      NewState.age += 1
      return NewState
  }
}

const initState = {
  name: "张三",
  age: 18
}


function App() {
  // const [flag, setFlag] = useState(true)

  // 全局数据
  const [state, dispatch] = useReducer(reducer, initState)
  return (
    <div className="App">
      {/* 路由6 */}
      {/* <Routes>
        <Route path="/home" element={<About7/>}/>
        <Route path="/about" element={<About2/>}/>
      </Routes> */}

      {/* useMemo */}
      <About8/>
      



      {/* <button onClick={() => {
        setFlag(false)
      }}>点我销毁</button>
      {
        flag? <About2/>: '没有了~'
      } */}

      {/* <About3/> */}
      {/* <h3>
        我是App --- { state.age }
      </h3>
      <button onClick={() => {
        dispatch({ type: "ADD" })
      }}>父组件的按钮</button> */}

      {/* <Context.Provider value={{
        state,
        dispatch
      }}>
        <About5/>
      </Context.Provider> */}

      {/* <About6></About6> */}

      {/* <About7></About7> */}

      
    </div>
  );
}

export default App;
